<%layout("/common/layout.html"){%>


<%if(has(info)){%>

<div class="am-container">
    <div class="am-alert am-alert-secondary" data-am-alert>
        <button type="button" class="am-close">&times;</button>
        <p>${info}</p>
    </div>
</div>

<%}%>

<%include("/common/head_index.html"){}%>


<style>

    .get {
        background: url('${base}/img/header.jpg') repeat-x;
        color: #fff;
        text-align: center;
        padding: 100px 0;
    }

    .on {
        background: 50% 50% no-repeat url('${base}/img/search.svg');
        border: solid #fff;
        border-width: 1px 1px 1px 0;
        width: 40px;
        height: 40px;

    }

</style>

<div class="get">
    <div class="am-g">

        <div class="am-u-lg-12">
            <h1 class="get-title  am-animation-fade">
                <img src="${base}/img/logo.png" style="height: 100px"> 腾书坊 </h1>

            <p class="get-info  am-animation-fade">
                以书会友-以书交友
            </p>

            <div class="am-lg">
                <div class="am-u-sm-6 am-u-sm-offset-4 ">
                    <form action="${base}/book/search" method="post">
                        <div class="am-input-group  am-animation-slide-bottom">
                            <input class="search" name="name" type="text" placeholder="&nbsp;&nbsp;&nbsp;请输入书名查找">
                            <input class="on" value="" type="submit">
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="detail">
    <div class="am-g am-container">
        <div class="am-u-lg-12">
            <br>

            <div class="am-g am-animation-slide-right am-text-center">
                <p>还在担心在二手书店买教材被坑钱?</p>

                <p>还在担心毕业后的书在外摊摆数天?</p>

                <p>想要用赠书结识兴趣相投的人?</p>

                <h2>那你还在等什么</h2>

                <p>"腾书房"会给你你想要的一切</p>
            </div>
        </div>

        <br>

        <h1 class="detail-h2 am-animation-fade h2">最新上架</h1>

        <div class="am-u-sm-12">


            <%for(book in books!){%>


            <div class="am-u-sm-4" style="float: left">
                <div class="am-thumbnail am-text-center">
                    <img src="${book.img}" class="am-img-thumbnail" style="height: 100px" alt=""/>

                    <div class="am-thumbnail-caption">
                        <h3>${book.name}</h3>

                        <p>出版社:${book.publish}</p>

                        <p class="am-text-center">
                            <a href='${base}/book?book=${book.id}&page=1' class="am-btn am-btn-primary">详情</a>
                        </p>
                    </div>
                </div>
            </div>

            <%}%>

        </div>
    </div>
</div>

<%}%>
